<template>
  <div class="content">
    <el-row :gutter="5">
      <el-col :span="4">
        <el-input size="small" placeholder="请输入要搜索的key" v-model="seachVal" clearable></el-input>
      </el-col>
      <el-col :span="2"><el-button size="small" plain @click="searchKey()" type="primary">搜索</el-button></el-col>
      <el-col :span="18"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="5" style="margin-top:20px;">
      <el-col :span="24">
        <el-table v-loading="loading" :data="result" ref="Tables" border max-height="475" style="width: 100%;">
          <el-table-column prop="key" style="height:50px;" label="keys" width="180"></el-table-column>
          <el-table-column prop="r" label="values" width="600"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="edit(scope.row.key,scope.$index)">编辑</el-button>
              <el-button size="mini" type="danger" @click="del(scope.row.key,scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog :visible.sync="dialogFormVisible">
      <el-row :gutter="5">
        <el-col :span="20">
          <el-input type="textarea" clearable autosize placeholder="添加数据" v-model="addValueT"></el-input>
        </el-col>
        <el-col :span="4"><el-button size="small" plain @click="add('start')" type="primary">添加</el-button></el-col>
      </el-row>

      <el-row :gutter="5" style="margin-top:10px;" v-for="(value,vindex) in editValue" :key="vindex">
        <el-col :span="20">
          <el-input type="textarea" autosize v-model="editValue[vindex]" clearable></el-input>
        </el-col>
        <el-col :span="4"><el-button size="small" plain @click="delRow(vindex)" type="danger">删除</el-button></el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="makeSure()">保存修改</el-button>
      </div>
    </el-dialog>
    <el-pagination style="margin-top:10px;" background layout="prev, pager, next" :page-size="pagesize" @current-change="pcurrent" :total="resultNum"></el-pagination>
  </div>
</template>

<script>
import { postData } from '../js/axios'
export default {
  data () {
    return {
      result: [],
      showShade: false,
      shwoEditLayer: false,
      editValue: '',
      editKey: '',
      curPage: 1,
      pageNum: 0,
      seachVal: '',
      resultNum: 0,
      addValueT: '',
      addValueE: '',
      pagesize: 8,
      dialogFormVisible: false,
      loading: true
    }
  },
  methods: {
    pcurrent: function (res) {
      this.curPage = res
      this.getData()
    },
    add: function (type) {
      if (type === 'start') {
        for (let i = 0; i < this.editValue.length; i++) {
          if (this.addValueT === this.editValue[i]) {
            this.addValueT = ''
            alert('集合中的数据不能重复')
            return false
          }
        }
        this.editValue.unshift(this.addValueT)
      } else {
        for (let i = 0; i < this.editValue.length; i++) {
          if (this.addValueE === this.editValue[i]) {
            this.addValueE = ''
            alert('集合中的数据不能重复')
            return false
          }
        }
        this.editValue.push(this.addValueE)
      }
      console.log('this:::', this.editValue)
      this.addValueT = ''
      this.addValueE = ''
    },
    searchKey: function () {
      console.log(this.seachVal)
      this.curPage = 1
      this.getData()
    },
    del: function (key, index) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let Obj = {}
        Obj.selectedServer = this.selectedServer
        Obj.db = this.db
        Obj.auth = this.auth
        Obj.key = key
        postData('del.php', Obj)
          .then(res => {
            console.log(res)
            if (res === 1 || res === 0) {
              this.getData()
            }
          })
      }).catch(() => {
        console.log('取消删除')
      })
    },
    edit: function (key, index) {
      this.dialogFormVisible = true
      console.log(this.result[index].value)
      this.editValue = this.result[index].value
      this.editKey = key
    },
    makeSure: function () {
      let Obj = {}
      Obj.selectedServer = this.selectedServer
      Obj.db = this.db
      Obj.auth = this.auth
      Obj.key = this.editKey
      Obj.value = this.editValue.join()
      Obj.type = 'set'
      console.log(this.editValue)
      postData('setValue.php', Obj)
        .then(res => {
          console.log('makesure:', res)
          if (res >= 1) {
            this.getData()
            this.dialogFormVisible = false
          }
        })
    },
    delRow: function (vindex) {
      console.log(vindex)
      this.editValue.splice(vindex, 1)
      console.log(this.editValue)
    },
    getData: function () {
      let Obj = {}
      Obj.selectedServer = this.selectedServer
      Obj.db = this.db
      Obj.auth = this.auth
      Obj.page = this.curPage
      Obj.seachVal = this.seachVal
      Obj.dataType = 'set'
      postData('get.php', Obj)
        .then(res => {
          this.loading = false
          console.log('result:', res)
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].r = JSON.stringify(res.data[i].value)
          }
          this.result = res.data
          this.pageNum = res.pageNum
          this.resultNum = res.resultNum
        })
    }
  },
  created () {
    this.selectedServer = this.$store.state.selectedServer
    this.db = this.$store.state.database
    this.auth = this.$store.state.auth
    if (this.$store.state.selectedServer === '' || this.$store.state.database === '') {
      this.$router.push('/')
    } else {
      this.getData()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../css/common.styl'
</style>
